import React, { useState } from 'react';
import { Button, Modal, Input, message } from 'antd';
import { UserAddOutlined, MessageOutlined } from '@ant-design/icons';
import './SocialActions.css';

interface SocialActionsProps {
    userId: string;
    isFollowing?: boolean;
    onFollow?: (userId: string) => void;
    onUnfollow?: (userId: string) => void;
    onSendMessage?: (userId: string, content: string) => void;
}

const SocialActions: React.FC<SocialActionsProps> = ({
    userId,
    isFollowing = false,
    onFollow,
    onUnfollow,
    onSendMessage
}) => {
    const [isMessageModalVisible, setIsMessageModalVisible] = useState(false);
    const [messageContent, setMessageContent] = useState('');

    const handleFollow = () => {
        if (isFollowing) {
            onUnfollow?.(userId);
        } else {
            onFollow?.(userId);
        }
    };

    const handleSendMessage = () => {
        if (!messageContent.trim()) {
            message.warning('请输入消息内容');
            return;
        }
        onSendMessage?.(userId, messageContent);
        setMessageContent('');
        setIsMessageModalVisible(false);
        message.success('消息发送成功');
    };

    return (
        <div className="social-actions">
            <Button
                type={isFollowing ? 'default' : 'primary'}
                icon={<UserAddOutlined />}
                onClick={handleFollow}
                className="action-button"
            >
                {isFollowing ? '已关注' : '关注'}
            </Button>
            <Button
                type="primary"
                icon={<MessageOutlined />}
                onClick={() => setIsMessageModalVisible(true)}
                className="action-button"
            >
                私信
            </Button>

            <Modal
                title="发送私信"
                visible={isMessageModalVisible}
                onOk={handleSendMessage}
                onCancel={() => setIsMessageModalVisible(false)}
                okText="发送"
                cancelText="取消"
            >
                <Input.TextArea
                    value={messageContent}
                    onChange={e => setMessageContent(e.target.value)}
                    placeholder="请输入消息内容"
                    rows={4}
                    maxLength={500}
                    showCount
                />
            </Modal>
        </div>
    );
};

export default SocialActions; 